<template>
    <div class="dashboard-editor-container main-conent-minheight">
        <el-card class="box-card" shadow="never">
            <div>
                <el-form :model="DataBackup" :rules="rules" ref="DataBackup" label-width="30%">
                    <el-row :gutter="24">
                        <!-- <span class="title" style="margin-bottom:20px;">日志处理</span> -->
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="每日数据处理时间点：" prop="Hours">
                                <el-select size="small" v-model="DataBackup.Hours" style="width:100%;">
                                    <el-option :label="0 + ':00'" :value="0"></el-option>
                                    <el-option v-for="item in 23" :key="item" :label="item + ':00'" :value="item"></el-option>
                                </el-select><span style="color:#606266;">（尽量配置为业务较少的时间点）</span>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-divider></el-divider>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="数据转储备份：" prop="IsBackupValid">
                                <el-radio-group v-model="DataBackup.IsBackupValid">
                                    <el-radio :label="1">开启</el-radio>
                                    <el-radio :label="0">关闭</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="数据转储模式：" prop="BackupType">
                                <el-radio-group v-model="DataBackup.BackupType"
                                    :disabled="DataBackup.IsBackupValid === 0">
                                    <el-radio :label="1">全量</el-radio>
                                    <el-radio :label="2">增量</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="数据转储备份间隔：" prop="Days">
                                <el-input size="small" v-model.number="DataBackup.Days"
                                    oninput="value=value.replace(/[^0-9]/g,'')"
                                    maxlength="4"
                                    :disabled="DataBackup.IsBackupValid === 0">
                                    <template slot="append">天</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="FTP地址：" prop="FtpServer">
                                <el-input size="small" v-model="DataBackup.FtpServer" oninput="value=value.replace(/[^0-9.]/g,'')" :disabled="DataBackup.IsBackupValid === 0"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="FTP端口：" prop="FtpPort">
                                <el-input size="small" v-model.number="DataBackup.FtpPort" maxlength="5" @input="validatePort" :disabled="DataBackup.IsBackupValid === 0"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="FTP账号：" prop="FtpUserName">
                                <el-input size="small" v-model="DataBackup.FtpUserName" maxlength="32" oninput="value=value.replace(/[^a-zA-Z0-9-_.]/g,'')" :disabled="DataBackup.IsBackupValid === 0"
                                    auto-complete="new-password"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="FTP密码：" prop="FtpPwd">
                                <el-input size="small" v-model="DataBackup.FtpPwd" maxlength="32" show-password  oninput="value=value.replace(/[^\w!@#$%^&*()\-+=[\]{}|;:,.<>?]/g)" :disabled="DataBackup.IsBackupValid === 0"
                                    auto-complete="new-password"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="FTP存储目录：">
                                <el-input size="small" v-model="DataBackup.FTPpath" maxlength="300" oninput="value=value.replace(/[^a-zA-Z0-9\/\\._-]/g, '')" :disabled="DataBackup.IsBackupValid === 0"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="最近转储备份时间：">
                                {{ DataBackup.LastExecTime === 0 ? '-' : parseTime(DataBackup.LastExecTime) }}
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="最近转储备份状态：">
                                <span :style="{ color: getStatusColor(DataBackup.LastExecStatus) }">{{
                                    DataBackup.LastExecTime === 0 ? '-' :
                                    DataBackup.LastExecStatus|FilterExecStatus }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="最近成功转储备份时间：">
                                {{ DataBackup.LastExecSuccessTime === 0 ? '-' : parseTime(DataBackup.LastExecSuccessTime) }}
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-divider></el-divider>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="日志自动清除：" prop="IsAutoDelValid">
                                <el-radio-group v-model="DataBackup.IsAutoDelValid">
                                    <el-radio :label="1">开启</el-radio>
                                    <el-radio :label="0">关闭</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="日志存储天数：" prop="LogSaveDays">
                                <el-input size="small" v-model.number="DataBackup.LogSaveDays"
                                    oninput="value=value.replace(/[^0-9]/g,'')"
                                    maxlength="6"
                                    :disabled="DataBackup.IsAutoDelValid === 0">
                                    <template slot="append">天</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="最近数据清除时间：">
                                {{ parseTime(DataBackup.LastAutoDelTime) }}
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="最近数据清除状态：">
                                <span :style="{ color: getStatusColor(DataBackup.LastExecAutoDelStatus) }">{{
                                    DataBackup.LastAutoDelTime === 0 ?
                                    '-' : DataBackup.LastExecAutoDelStatus|FilterExecStatus }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-divider></el-divider>
                        </el-col>
                    </el-row>
                    <div style="display:flex;justify-content: center;">
                        <el-button type="primary" @click="submit">保存设置</el-button>
                    </div>
                </el-form>
            </div>
        </el-card>

    </div>
</template>

<script>
// import CryptoJs from "crypto-js";
import { connrequest } from '@/api/firstPage';
import { parseTime } from '@/utils/index.js'
import { macRegex, ipv6Regex, ipv4Regex } from '@/utils/RegularExpression.js';
import { validatePort } from "@/utils/index.js";
let that = this
export default {
    filters: {
        FilterExecStatus(Status) {
            const bindColor = {
                0: '成功',
                1: '正在执行',
                2: '失败',
            };
            return bindColor[Status];
        },
    },
    data() {
        let validate = (rule, value, callback) => {
            if (value != '') {
                if (value < 1 || value > 365 || !Number.isInteger(value)) {
                    callback(new Error("请输入1~365之间的值"))
                } else {
                    callback()
                }
            } else {
                callback(new Error("请输入天数"))
            }
        }
        var validateIP = (rule, value, callback) => {
            if (this.DataBackup.IsBackupValid === 1 && (ipv6Regex.test(value) || ipv4Regex.test(value))) {
                callback()
            } else if (this.DataBackup.IsBackupValid === 1 && (value === '' || value === undefined)) {
                callback(new Error('地址不能为空'))
            } else {
                callback(new Error('请输入正确的IP格式'))
            }
        }
        let validPort = (rule, value, callback) => {
            if (value != '' && this.DataBackup.IsBackupValid === 1) {
                if ((value < 1 || value > 65535 || !Number.isInteger(value)) && this.DataBackup.IsBackupValid === 1) {
                    callback(new Error("请输入1~65535之间的值"))
                } else {
                    callback()
                }
            } else {
                callback(new Error("请输入端口"))
            }
        }
        return {
            btnName: '保存设置',
            DataBackup: {
                Hours: 23,
                IsBackupValid: 0,
                BackupType: 2,
                Days: 0,
                FTPpath: '',
                Status: 0,
                Note: '',
                FtpServer: '',
                FtpPort: 21,
                FtpUserName: '',
                FtpPwd: '',
                IsAutoDelValid: 0,
                LogSaveDays: 180,
            },
            fileList: [],
            DataRecover: {
                File: '',
                // Password: ''
            },
            file: [],
            rules: {
                Hours: [{ required: true, message: '请选择备份时间点', trigger: 'change' }],
                // Days: [{ required: true, validator: validate, trigger: 'blur' }],
                // FtpServer: [{ required: false, validator: validateIP, trigger: "blur" }],
                // FtpPort: [{ required: false, message: '请输入端口', trigger: "blur" }],
                // FtpUserName: [{ required: true, message: '请输入账号', trigger: "blur" }],
                // FtpPwd: [{ required: true, message: '请输入密码', trigger: "blur" }],
            }
        }
    },
    created() {
        this.GetDataBackup();
    },
    methods: {
        parseTime,
        validatePort(value){
          this.$set(this.DataBackup, 'FtpPort', validatePort(value) * 1)
        },
        getStatusColor(Status) {
            const bindColor = {
                0: '#0ECB92',
                1: '#FFFFFF',
                2: '#F56C6C',
            };
            return bindColor[Status];
        },
        async GetDataBackup() {
            const paramData = {
                Filter: {
                    FileName: "data_backup.json"
                },
            }
            const res = await connrequest('GetUICommonParam', paramData);
            if (res.Status.StatusCode === 0) {
                this.DataBackup = {
                    ...this.DataBackup,
                    ...res.Data,
                };
                if(res.Data){
                    this.DataBackup = {
                        ...this.DataBackup,
                        LastExecTime: res.Data.LastExecTime,
                        LastExecStatus: res.Data.LastExecTime === 0 ? '-' : res.Data.LastExecStatus,
                        LastExecSuccessTime: res.Data.LastExecSuccessTime,
                        LastAutoDelTime: res.Data.LastAutoDelTime
                    }
                }
            }
        },
        async submit() {
            this.$refs['DataBackup'].validate(async (valid) => {
                if (valid) {
                    if(this.DataBackup.IsBackupValid === 1 &&  !this.DataBackup.FtpServer){
                        this.$message.error('FTP地址不能为空')
                        return false
                    }
                    if(this.DataBackup.IsBackupValid === 1 && !ipv6Regex.test(this.DataBackup.FtpServer) && !ipv4Regex.test(this.DataBackup.FtpServer)){
                        this.$message.error('FTP地址错误')
                        return false
                    }
                    if(this.DataBackup.IsBackupValid === 1 &&  !this.DataBackup.FtpPort){
                        this.$message.error('FTP端口不能为空')
                        return false
                    }
                    if(this.DataBackup.IsBackupValid === 1 &&  (this.DataBackup.FtpPort < 1 || this.DataBackup.FtpPort > 65535 || !Number.isInteger(this.DataBackup.FtpPort))){
                        this.$message.error('FTP端口只能在1~65535之间')
                        return false
                    }
                    if(this.DataBackup.IsBackupValid === 1 &&  !this.DataBackup.FtpUserName){
                        this.$message.error('FTP账号不能为空')
                        return false
                    }
                    if(this.DataBackup.IsBackupValid === 1 &&  !this.DataBackup.FtpPwd){
                        this.$message.error('FTP密码不能为空')
                        return false
                    }
                    
                    // if(this.DataBackup.LogSaveDays < 180){
                    //     this.$message.error('日志存储天数不得小于180天')
                    //     return false
                    // }
                    const paramData = {
                        Filter: {
                            FileName: "data_backup.json"
                        },
                        Data: {
                            ...this.DataBackup,
                        }
                    }
                    const res = await connrequest('SetUICommonParam', paramData)
                    if (res.Status.StatusCode === 0) {
                        this.$message.success('保存成功')
                        this.GetDataBackup()
                    }
                }
            });
        }
    }
}
</script>

<style lang='scss' scoped>
.box-card {
    margin-bottom: 16px !important;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

::v-deep .el-card__header {
    padding: 10px !important;
}

.el-date-editor {
    width: 50% !important;
}

.el-select {
    width: 50% !important;
}

.el-form-item {
    margin-bottom: 10px !important;
}

.el-textarea {
    width: 50% !important;
}

.el-input--small {
    width: 50% !important;
}

.upload-demo {
    display: flex !important;

    ::v-deep .el-upload-list {
        margin-left: 10px !important;
    }
}

.el-button+.el-button,
.el-checkbox.is-bordered+.el-checkbox.is-bordered {
    background-color: #314054;
    border: none;
    color: white;
}
</style>